<template>
  <div style="padding: 8px 24px 24px;">
    <div class="title">机构传播分析</div>
    <div
      class="tips"
    >温馨提示：机构传播分析，可以帮助您分析由机构老师直接分享转发出去之后，家长的查看、报名情况。您可以通过这些分析结果来调整老师转发的执行动作，或了解您直接接触到的家长对活动的认可度、参与度。</div>
    <div class="content">
      <div class="total">
        <div class="item">
          <div class="number">{{count.forward}}</div>
          <div class="text">机构页面转发数</div>
        </div>
        <div class="item">
          <div class="number">{{count.views}}</div>
          <div class="text">机构页面浏览数</div>
        </div>
        <div class="item">
          <div class="number">{{count.signUp}}</div>
          <div class="text">机构页面报名数</div>
        </div>
      </div>
      <div class="average">
        <div class="item">
          <div class="number">
            <span class="text">
              <span v-if="Number(count.views)!==0&&Number(count.forward)!==0">
                <span v-if="Number(count.views)/Number(count.forward)!==0">
                  <span>{{Number(count.views)/Number(count.forward)}}</span>
                </span>
                <span v-else>-</span>
              </span>
              <span v-else>-</span>
            </span>
            <span class="icon">
              <a-popover placement="rightTop">
                <template slot="content">
                  当此数值低于您的预期时，表示很
                  <br />多家长未看到活动推送或看到了但
                  <br />没有点击查看。您可以通过更多渠
                  <br />道将活动推送给更多家长，或优化
                  <br />活动标题使其更简单直接。
                </template>
                <a-icon type="alert" style />
              </a-popover>
            </span>
          </div>
          <div class="text">平均每次转发带来的浏览数</div>
        </div>
        <div class="item">
          <div class="number">
            <span class="text">
              <span v-if="Number(count.views)!==0&&Number(count.signUp)!==0">
                <span v-if="Number(count.views)/Number(count.signUp)!==0">
                  <span>{{Number(count.views)/Number(count.signUp)}}</span>
                </span>
                <span v-else>-</span>
              </span>
              <span v-else>-</span>
            </span>
            <span class="icon">
              <a-popover placement="rightTop">
                <template slot="content">
                  当此数值过高时，表示很多家长打
                  <br />开了活动页面但没有参加。可能家
                  <br />长对活动规则或者奖励设置不够满
                  <br />意，您可对活动规则、奖励内容、
                  <br />机构介绍进行优化。
                </template>
                <a-icon type="alert" style />
              </a-popover>
            </span>
          </div>
          <div class="text">平均每个报名所需的浏览数</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'diffuse',
  props: ['data', 'count'],
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  color: #666;
  font-weight: 500;
  margin-bottom: 16px;
}
.tips {
  font-size: 12px;
  color: #999;
}
.content {
  margin: 80px 0 100px;
  display: -ms-flexbox;
  display: flex;
  .total {
    width: 535px;
    height: 336px;
    background: url(https://image.xiaomaiketang.com/xm/TrjP8mJymp.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    margin-left: 120px;
    .item {
      position: absolute;
      left: 189px;
      text-align: center;
      color: #fff;
      .number {
        font-size: 18px;
        font-weight: 500;
      }
      .text {
        font-size: 12px;
      }
    }
    .item:first-of-type {
      top: 25px;
    }
    .item:nth-of-type(2) {
      top: 127px;
    }
    .item:nth-of-type(3) {
      top: 227px;
    }
  }
  .average {
    margin: 33px 0 0 24px;
    .item {
      margin-bottom: 28px;
      text-align: center;
      position: relative;
      .number {
        .text {
          font-size: 36px;
          font-weight: 500;
          color: #ff8534;
        }
        .icon {
          .anticon {
            position: relative;
            top: -4px;
            font-size: 24px;
            cursor: pointer;
            margin-left: 24px;
            color: #ccc;
          }
        }
        .icon:hover {
          .anticon {
            color: #ff8534;
          }
        }
      }
      .text {
        font-size: 16px;
        color: #666;
        margin-top: 12px;
        text-align: left;
        font-weight: 500;
      }
    }
  }
}
</style>